<template>
<div class="roles">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
    <el-breadcrumb-item>权限列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-button type="primary" plain>添加角色</el-button>
  <el-table class="mt-10" border :data="rolesList" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="scope">
        <el-row v-for="firstChildren in scope.row.children" :key="firstChildren.id">
          <el-col :span="4">
            <el-tag closable @close="deleteRigth(scope.row,firstChildren.id)">{{firstChildren.authName}}</el-tag>
            <i class="el-icon-arrow-right" v-if="firstChildren.children.length!==0"></i>
          </el-col>
          <el-col :span="20">
            <el-row v-for="secondChildren in firstChildren.children" :key="secondChildren.id">
              <el-col :span="3">
                <el-tag closable type='success' @close="deleteRigth(scope.row,secondChildren.id)">{{secondChildren.authName}}</el-tag>
                <i class="el-icon-arrow-right" v-if="secondChildren.children.length!==0"></i>
              </el-col>
              <el-col :span="21">
                <el-tag closable type='warning' v-for="thirdChildren in secondChildren.children" :key="thirdChildren.id" @close="deleteRigth(scope.row,thirdChildren.id)">
                  {{thirdChildren.authName}}
                </el-tag>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row v-if="scope.row.children.length===0">
          <el-col :span="24">该角色没有分配权限,看清前往分配</el-col>
        </el-row>
      </template>
    </el-table-column>
    <el-table-column label="角色名称" prop="roleName" width="120px">
    </el-table-column>
    <el-table-column label="描述" prop="roleDesc" width="165px">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" type="primary" plain icon="el-icon-edit"></el-button>
        <el-button size="mini" type="danger" plain icon="el-icon-delete"></el-button>
        <el-button size="mini" type="warning" plain icon="el-icon-check" title="授权角色"  @click="showDialog(scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog title="授权角色" :visible.sync="dialogFormVisible">
      <div class="tree-container">
        <el-tree 
        :default-expand-all="true"
        :data="rightList" show-checkbox node-key="id" 
        :default-expanded-keys="[2, 3]" 
        :default-checked-keys="selectRigths" 
        :props="defaultProps">
        </el-tree>
      </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>

</div>
</template>

           

<script>
import {
  getRolesList,
  deleteRoleRigth,
  getRigthList
} from "@/api";
export default {
  data() {
    return {
      rolesList: [],
      dialogFormVisible: false,
      rightList: [],
      selectRigths:[],// 保存默认选择的权限id
      currentRole:{},// 保存点击的角色
        defaultProps: {
          children: 'children',
          label: 'authName'
        }
    };
  },
  created() {
    getRolesList().then(res => {
    //   console.log(res);
      if (res.meta.status === 200) {
        this.rolesList = res.data;
      }
    });
  },
  methods: {
    deleteRigth(row, rigthId) {
        // console.log(row,row.children);
        
      deleteRoleRigth({
        roleId: row.id,
        rightId: rigthId
      }).then(res => {
        if (res.meta.status === 200) {
          //   console.log(res.data);
          row.children = res.data;
          //   console.log(row);
        } else {
          this.$message({
            type: "error",
            messages: res.meta.msg
          });
        }
      });
    },
    showDialog(row) {
      this.dialogFormVisible = true,
      this.currentRole = row
      console.log(this.currentRole)
      getRigthList({type:"tree"}).then(res=>{
          if(res.meta.status===200){
            //   console.log(res.data)
              this.rightList = res.data
          }else{
              this.$message({
                  type:"error",
                  message:res.meta.msg
              })
          }
      })
      //遍历之前清空数组
      this.selectRigths.length=0
      // 取出当前点击角色的所有权限,然后遍历到他的第三children,取出它里面的所有项的id,让进selectRigth
        this.currentRole.children.forEach(first=>{
            if(first.children&&first.children.length!==0){
                first.children.forEach(second=>{
                    if(second.children&&second.children.length!==0){
                        second.children.forEach(third=>{
                            this.selectRigths.push(third.id)
                        })
                    }
                })
            }
        })
    }
  }
};
</script>
<style lang="scss">
.roles {
  .el-tag {
    margin-bottom: 5px;
    margin-right: 5px;
  }
  .tree-container{
      height: 300px;
      overflow:auto;
  }

}
</style>
